<template>
  <div class="about">
    <h1>This is an about page</h1>
    <el-button type="primary">你好</el-button>

    <el-table border :data="tableList">
      <el-table-column label="id" prop="id">
      </el-table-column>
     <el-table-column label="姓名" prop="name">

      </el-table-column>
      <el-table-column label="年龄" prop="age">

      </el-table-column>
     <el-table-column label="操作" >
       <!-- slot-scope废弃 替换#default="" -->
       <template #default="scope">
         <div>
             <div >
                <el-button @click="say(scope.row.id)"  type="danger">删除</el-button>
            </div>
         </div>
       </template>
      </el-table-column>
    </el-table>

  </div>  
</template>
<script lang="ts">
import {reactive,toRefs} from 'vue'
export default {
    setup() {
       let datas=reactive({
          tableList:[{
            id:1,
            name:"张三",
            age:18
          },{
            id:2,
            name:"李四",
            age:20
          }
         ],
         say(id:number){
            datas.tableList.forEach((item,index)=>{
              console.log(item)
              if(id==item.id){
                 datas.tableList.splice(index,1)
                return 
              }
            })
         }
       })
       let mydata=toRefs(datas)
       return {
         ...mydata
       }
    }
}
</script>
